<%@ page language="java" contentType="text/html; charset=utf8"
	pageEncoding="utf8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<link type="text/css" href="resources/css/main.css" rel="stylesheet" />
    <style>
    #toolbar {
        padding: 10px 4px;
    }
    </style>	
<script type="text/javascript">
var lastSel = "";
$(function(){ 
	
  /* ------------------ GRID FUNCTION ----------------- */	
  $("#jqUserBasketList").jqGrid({
	jsonReader : {
	      root:"rows",
	      page: "page",
	      total: "total",
	      records: "records",
	      repeatitems: false,
	      id: "0"
	   },	  
    url:'json/entity/userBasket',
    datatype: 'json',
    mtype: 'GET',
    colNames:['#','Фото','Инв.№','Носитель №', 'Тип носителя','AB','Цена','Регион','Нас. пункт', 'Адрес','Начало','Окончание', 'Бронь', 'Редактировать'],// 'Delete'],
    colModel :[ 
      {name:'id', 					index:'id', 				width:10, sortable:false },
      {name:'photo', 				index:'photo',				width:120, formatter: photoFormatter, sortable:false },      
      {name:'advertisingRegistry.inventarNr', 	   	index:'advertisingRegistry.inventarNr', 	width:40, sortable:false },
      {name:'advertisingRegistry.supportNr', 	   	index:'advertisingRegistry.supportNr', 	width:40, sortable:false, fixed:true, hidden:true},      
      {name:'advertisingRegistry.supportTypeName',	index:'advertisingRegistry.supportTypeName',width:50, sortable:false },
      {name:'AB', 	   				index:'AB', 				width:40,  align:'center', sortable:false, formatter: partFormatter},
      {name:'advertisingRegistry.price_base', 		index:'price_base',							width:45, formatter: priceFormatter , align:'center' , sortable:false },      
      {name:'advertisingRegistry.regionName',		index:'advertisingRegistry.supportTypeName',width:80, sortable:false },
      {name:'advertisingRegistry.localityName',		index:'advertisingRegistry.supportTypeName',width:80, sortable:false },
      {name:'advertisingRegistry.adress', 	   		index:'advertisingRegistry.adress', 		width:100, sortable:false },
      {name:'beginCommandDate',		index:'beginCommandDate', align:'center',
    	  	 width:50, sortable:false, editable: true},
	  {name:'endCommandDate', 	   	index:'endCommandDate', align:'center',
    		  width:50, sortable:false , editable: true },
      {name:'reservationType', 	   	index:'reservationType', 		width:40, sortable:false,   hidden:true},
      {name:'id', 					index:'id', 	width:60, align:'center', fixed:true, sortable:false, resize:false, 
    	  formatter:'actions', formatoptions:{keys:true}}
    ],
    pager: '#pager',
    toppager: false,
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    autowidth: true,
    height: 'auto',
    caption: 'Содержимое корзины',
    search: true,
   	editurl : 'json/entity/userBasket/edit'
  }); 
	
	function photoFormatter(cellvalue, options, rowObject) {
		return "<img src='images/small/" + (rowObject['advertisingRegistry'])['inventarNr'] + "' width='120' alt='Photo' title='PHOTO' />";
	};   

	function priceFormatter(cellvalue, options, rowObject) {
  		return cellvalue + " \u20AC";
	};   

  function partFormatter(cellvalue, options, rowObject) {
	  var inv = (rowObject['advertisingRegistry'])['inventarNr'];
	  var sup = (rowObject['advertisingRegistry'])['supportNr'];
	  return inv.replace(sup,'');
  };  
	
   $( "#checkBasketItems").button().click(function() {
    	$.each($('#jqUserBasketList').jqGrid('getDataIDs'), 
    			function(index, value) { 
    		  		//alert(index + ': ' + value);
    		  		checkOneItem(value);
    			}
    	);
    });
   
   function checkOneItem(itemId){
	   $("#checkResult").html("Checking...");
       $.ajax({
     	  url: 'json/entity/userBasket/checkItem',
     	  dataType: 'json',
     	  type: 'POST',
     	  async: true,
     	  data: {itemBasketId: itemId },
     	  success: function(data, textStatus, jqXHR) {
     		  	alert("Succes" + textStatus);
     		 	$("#checkResult").html(data.itemChecked);
     		  },
     	  error: function() {
     	            alert('Error occured');
     	        }     		  
     });
	   
   }
	
    $( "#placeOrder").button().click(function() {
    	if ($("#jqUserBasketList").getGridParam("reccount") <1 ){
    		alert('Basket is Empty');
    		return;
    	}
    	
        $.ajax({
       	  url: 'json/entity/userBasket/submit',
       	  dataType: 'json',
       	  type: 'GET',
       	  async: true,
       	  data: {},
       	  success: function(data, textStatus, jqXHR) {
       		  	alert("Succes" + data.result);
	       		$("#jqUserBasketList").trigger("reloadGrid");
       		  },
       	  error: function() {
       	            alert('Error occured');
       	        $("#jqUserBasketList").trigger("reloadGrid");
       	        }     		  
       });
		
    });
    
    $( "#clearBasket").button().click(function() {
    	if ($("#jqUserBasketList").getGridParam("reccount") <1 ){
    		return;
    	}
    	
        $.ajax({
       	  url: 'json/entity/userBasket/deleteAll',
       	  dataType: 'json',
       	  type: 'POST',
       	  async: true,
       	  data: {},
       	  success: function(data, textStatus, jqXHR) {
       		  	//alert("Succes" + data.result);
	       		$("#jqUserBasketList").trigger("reloadGrid");
       		  },
       	  error: function() {
       	        alert('Error occured');
       	        $("#jqUserBasketList").trigger("reloadGrid");
       	        }     		  
       });
		
    });    
	
});
	
</script>	
	<title>Insert title here</title>
</head>
<body>

<span id="toolbar" class="ui-widget-header ui-corner-all">
    <button id="checkBasketItems" style="visibility: hidden;">Check Items</button>
    <button id="clearBasket">Очистить корзину</button>
    <button id="placeOrder">Оформить заказ</button>
    
</span>
	<div id="checkResult"></div>
<table id="jqUserBasketList">
	<tr><td/></tr>
</table>



</body>
</html>
